<!-- 房间管理 -->
<template>
  <div class="app-container">
    <div class="app-form">
      <el-form
        ref="tablePage"
        :inline="true"
        :model="tablePage"
      >
        <el-form-item label="房间名称" prop="name">
          <el-input v-model="tablePage.name" size="small" clearable @keyup.enter.native="screening" />
        </el-form-item>
        <el-form-item label="所属楼宇" prop="buildName">
          <el-input v-model="tablePage.buildName" size="small" clearable @keyup.enter.native="screening" />
        </el-form-item>
        <el-form-item label="租赁状态" prop="leaseStatus">
          <el-select v-model="tablePage.leaseStatus" size="small" placeholder="请选择">
            <el-option label="未租" :value="0" />
            <el-option label="已租" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left:25px;">
          <el-button type="primary" size="small" @click="screening">查询</el-button>
          <el-button type="default" size="small" @click="reset('tablePage')">重置</el-button>
          <el-button type="success" size="small" @click="add">新建</el-button>
          <el-button v-show="isShowDel" type="danger" size="small" @click="delAll">删除</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格部分 须放在mytablebox盒子下面自定义样式才有效果 -->
      <div class="mytablebox">
        <vxe-table
          ref="xTable"
          align="center"
          :round="true"
          :data="tableData"
          height="100%"
          :export-config="{}"
          header-row-class-name="headerName"
          @checkbox-all="selectAllEvent"
          @checkbox-change="selectChangeEvent"
        >
          <vxe-table-column type="checkbox" width="60" fixed="left" />
          <vxe-table-column field="parkName" title="所属园区" show-overflow />
          <vxe-table-column field="name" title="房间名称" show-overflow />
          <vxe-table-column field="buildName" title="所属楼宇" show-overflow />
          <vxe-table-column field="area" title="面积(m²)" show-overflow />
          <vxe-table-column field="rentArea" title="收租面积(m²)" show-overflow />
          <vxe-table-column field="sarea" title="公摊面积(m²)" show-overflow />
          <vxe-table-column field="leaseStatus" title="租赁状态" show-overflow />
          <vxe-table-column field="rent" title="租金(元)" show-overflow />
          <vxe-table-column field="rentType" title="租金类型" :formatter="['formatDefault',rentTypeObj]" show-overflow />
          <vxe-table-column field="inDate" title="上架时间" show-overflow sortable />
          <vxe-table-column field="status" title="是否上架" show-overflow>
            <template #default="{ row }">
              <vxe-switch :value="row.status" size="small" @change="clickSwitch(row)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" fixed="right" width="200">
            <template v-slot="{ row }">
              <vxe-button status="primary" content="编辑" @click="update(row)" />
              <vxe-button status="danger" content="删除" @click="delOne(row.id)" />
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
      <!-- 分页部分 -->
      <vxe-pager
        :current-page="tablePage.page"
        :page-size="tablePage.limit"
        :total="tablePage.total"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']"
        @page-change="handlePageChange"
      />
    </div>
    <el-dialog
      title="操作"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
      :show-close="false"
    >
      <el-form ref="ruleForm" :model="form" status-icon :rules="rules" label-width="120px">
        <el-form-item label="所属园区" prop="parkId">
          <el-select v-model="form.parkId" placeholder="请选择园区">
            <el-option v-for="(item,index) in parkData" :key="index" :label="item.name" :value="parseInt(item.id)" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属楼宇" prop="buildId">
          <el-select v-model="form.buildId" placeholder="请选择楼宇">
            <el-option v-for="(item,index) in buildData" :key="index" :label="item.name" :value="parseInt(item.id)" />
          </el-select>
        </el-form-item>
        <el-form-item label="房间名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入房间名称" />
        </el-form-item>
        <el-form-item label="租金" prop="rent">
          <el-input v-model="form.rent" type="number" placeholder="请输入租金">
            <el-select slot="append" v-model="form.rentType" style="width:120px">
              <el-option label="元/天" :value="1" />
              <el-option label="元/月" :value="2" />
              <el-option label="元/m²/天" :value="3" />
              <el-option label="元/m²/月" :value="4" />
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="物业费" prop="prent">
          <el-input v-model="form.prent" type="number" placeholder="请输入物业费">
            <el-select slot="append" v-model="form.prentType" style="width:120px">
              <el-option label="元/天" :value="1" />
              <el-option label="元/月" :value="2" />
              <el-option label="元/m²/天" :value="3" />
              <el-option label="元/m²/月" :value="4" />
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="房间面积(m²)" prop="area">
          <el-input v-model="form.area" type="number" placeholder="请输入房间面积" />
        </el-form-item>
        <el-form-item label="收租面积(m²)" prop="rentArea">
          <el-input v-model="form.rentArea" type="number" placeholder="请输入收租面积" />
        </el-form-item>
        <el-form-item label="公摊面积(m²)" prop="sarea">
          <el-input v-model="form.sarea" type="number" placeholder="请输入公摊面积" />
        </el-form-item>
        <el-form-item label="房型" prop="roomType">
          <el-select v-model="form.roomType" placeholder="请选择房型">
            <el-option v-for="(item,index) in roomTypeData" :key="index" :label="item.name" :value="parseInt(item.id)" />
          </el-select>
        </el-form-item>
        <el-form-item label="层高(米)" prop="height">
          <el-input v-model="form.height" type="number" placeholder="请输入公摊面积" />
        </el-form-item>
        <el-form-item label="可入住日期" prop="inDate">
          <el-date-picker
            v-model="form.inDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择可入住日期"
          />
        </el-form-item>
        <el-form-item label="装修类型" prop="decorateType">
          <el-select v-model="form.decorateType" placeholder="请选择装修类型">
            <el-option v-for="(item,index) in roomTypeData" :key="index" :label="item.name" :value="parseInt(item.id)" />
          </el-select>
        </el-form-item>
        <el-form-item label="奖金">
          <el-input v-model="form.bonus" type="number" placeholder="请输入奖金" />
        </el-form-item>
        <el-form-item label="房间小图">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :headers="headers"
            :limit="1"
            :file-list="file_list"
            list-type="picture-card"
            :on-success="handSuccess"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="reset2('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getToken } from '@/utils/auth'
import { delFile } from '@/api/upload'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      action: process.env.VUE_APP_BASE_API + '/api-user/upload/uploadFile',
      headers: {
        'Authorization': 'Bearer ' + getToken()
      },
      file_list: [],
      tablePage: {
        page: 1,
        limit: 10,
        total: 0,
        name: null,
        buildName: null,
        leaseStatus: null
      },
      tableData: [
        {
          parkName: '华景园区',
          parkId: 1,
          buildId: 1,
          buildName: 'A',
          name: '测试房间',
          rent: 200,
          rentType: 1,
          prent: 42,
          prentType: 4,
          leaseStatus: 1,
          area: 120.50,
          rentArea: 120.50,
          sarea: 10,
          roomType: 1,
          roomTypeName: '商业配套',
          height: 3,
          inDate: '2021-06-10',
          decorateType: 1,
          decorateTypeName: '毛胚',
          bonus: null,
          image: null,
          remark: null,
          status: false
        }
      ],
      rentTypeObj: {
        1: '元/天',
        2: '元/月',
        3: '元/m²/天',
        4: '元/m²/月'
      },
      parkData: [
        {
          name: '华景园区',
          id: 1
        },
        {
          name: '289艺术园区',
          id: 2
        }
      ],
      buildData: [
        {
          id: 1,
          name: 'A'
        }
      ],
      roomTypeData: [
        {
          id: 1,
          name: '商业配套'
        },
        {
          id: 2,
          name: '办公场所'
        },
        {
          id: 3,
          name: '其他'
        }
      ],
      decorateTypeData: [
        {
          id: 1,
          name: '毛胚'
        },
        {
          id: 2,
          name: '简装房'
        },
        {
          id: 3,
          name: '精装房'
        }
      ],
      records: [],
      isShowDel: false,
      dialogVisible: false,
      form: {
        parkId: null,
        buildId: null,
        name: null,
        rent: null,
        rentType: 1,
        prent: null,
        prentType: 1,
        area: null,
        rentArea: null,
        sarea: null,
        roomType: null,
        height: null,
        inDate: null,
        decorateType: null,
        bonus: null
      },
      rules: {
        parkId: { required: true, message: '请选择园区', trigger: 'change' },
        buildId: { required: true, message: '请选择楼栋', trigger: 'change' },
        name: { required: true, message: '请输入房间名称', trigger: 'blur' },
        rent: { required: true, message: '请输入租金', trigger: 'blur' },
        prent: { required: true, message: '请输入物业费', trigger: 'blur' },
        area: { required: true, message: '请输入房间面积', trigger: 'blur' },
        rentArea: { required: true, message: '请输入收租面积', trigger: 'blur' },
        sarea: { required: true, message: '请输入公摊面积', trigger: 'blur' },
        roomType: { required: true, message: '请选择房型', trigger: 'change' },
        inDate: { required: true, message: '请选择可入住日期', trigger: 'change' },
        decorateType: { required: true, message: '请选择装修类型', trigger: 'change' }
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    init() {

    },
    // 筛选
    screening() {
      this.tablePage.page = 1
      this.init()
    },
    // 取消
    reset(formName) {
      this.$refs[formName].resetFields()
    },
    reset2(formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       this.dialogVisible = false
    //     } else {
    //       console.log('error submit!!')
    //       this.dialogVisible = false
    //       return false
    //     }
    //   })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    add() {
      this.form = {
        rentType: 1,
        prentType: 1
      }
      this.dialogVisible = true
    },
    delAll() {
      this.$confirm('此操作将永久删除选中数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.records = []
        this.$refs.xTable.clearCheckboxRow()
        this.isShowDel = false
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.records = []
        this.$refs.xTable.clearCheckboxRow()
        this.isShowDel = false
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 表格全选事件
    selectAllEvent({ records, checked }) {
      this.records = records
      if (checked) this.isShowDel = true
      else this.isShowDel = false
    },
    // 表格单行选择事件
    selectChangeEvent({ records, checked }) {
      this.records = records
      if (checked) this.isShowDel = true
      else this.isShowDel = false
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.page = currentPage
      this.tablePage.limit = pageSize
      this.init()
    },
    update(row) {
      this.file_list = []
      this.form = Object.assign({}, this.form, row)
      if (this.form.image) {
        this.file_list[0] = {
          url: this.form.image
        }
      }
      this.dialogVisible = true
    },
    delOne(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    clickSwitch(row) {
      this.$confirm('确认要' + (row.f ? '下架' : '上架') + '房间【' + row.name + '】吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: (row.f ? '下架' : '上架') + '成功!'
        })
        row.f = !row.f
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' + (row.f ? '下架' : '上架')
        })
      })
    },
    handleRemove(file, fileList) {
      let url = null
      if (file.response) url = file.response.data[0].split('/')[file.response.data[0].split('/').length - 1]
      else url = file.url.split('/')[file.url.split('/').length - 1]
      delFile(url)
    },
    handSuccess(response, file, fileList) {
      this.form.image = response.data[0]
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.app-container{
  display: flex;
}
</style>
